<template>

    <div class="home">
        <header class="topNav">
            <div class="left">
                <van-icon name="wap-nav" />
            </div>
            <div class="middle">
                <span class="one">码路严选</span>
                <span class="two"> | </span>
                <span class="three">全新全意为学员服务</span>
            </div>
            <div class="right">
                <van-icon name="contact" />
            </div>
        </header>
        <main>
            <!-- 轮播图 -->
            <van-swipe :loop="false" :width="420" height="200" autoplay="3000">
                <van-swipe-item><img :src="carousels[0]" width="420" alt=""></van-swipe-item>
                <van-swipe-item>
                    <img :src="carousels[1]" width="420" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img :src="carousels[2]" width="420" alt="">
                </van-swipe-item>
            </van-swipe>
            <!-- 宫格 -->
            <van-grid :border="false" :column-num="5">
                <van-grid-item>
                    <van-icon name="shopping-cart" />
                    <span>码路超市</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='tubiao-' />
                    <span>码路服饰</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='quanqiu' />
                    <span>全球购</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='shengxian-haixian' />
                    <span>码路生鲜</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='wuliuwuliuyunshu' />
                    <span>码路到家</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='jinqian' />
                    <span>充值缴费</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='gouwu' />
                    <span>9.9元拼</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='youhuijuan' />
                    <span>领卷</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='shengqian' />
                    <span>省钱</span>
                </van-grid-item>
                <van-grid-item>
                    <van-icon class="iconfont" class-prefix='icon' name='all' />
                    <span>全部</span>
                </van-grid-item>
            </van-grid>

            <p class="newgood">新品上线</p>
            <!-- 新品上线 -->
            <van-grid :border="false" :column-num="2">
                
                <van-grid-item  class="newGoods" 
                v-for="item in newGoodses" 
                :key="item.goodsId"
                :to="`/info/${item.goodsId}`"
                >
                    <img :src="item.goodsCoverImg" alt="">
                    <p>{{ item.goodsName }}</p>
                    <span>￥{{item.sellingPrice.toFixed(2)}}</span>
                </van-grid-item>
                <van-grid-item>
                    
                </van-grid-item>
            </van-grid>

            <p class="newgood">热销商品</p>
            <!-- 热销商品 -->
            <van-grid :border="false" :column-num="2">
                <van-grid-item class="newGoods" 
                v-for="item in hotGoodses" 
                :key="item.goodsId"
                :to="`/info/${item.goodsId}`"
                >
                    <img :src="item.goodsCoverImg" alt="">
                    <p>{{ item.goodsName }}</p>
                    <span>￥{{item.sellingPrice.toFixed(2)}}</span>
                </van-grid-item> 

            </van-grid>

            <p class="newgood">最新推荐</p>
           <!-- 最新推荐 -->
            <van-grid :border="false" :column-num="2">
                <van-grid-item class="newGoods" 
                v-for="item in recommendGoodses" 
                :key="item.goodsId"
                :to="`/info/${item.goodsId}`"
                >
                    <img :src="item.goodsCoverImg" alt="">
                    <p>{{ item.goodsName }}</p>
                    <span>￥{{item.sellingPrice.toFixed(2)}}</span>
                </van-grid-item>
                <van-grid-item >
                    
                </van-grid-item>
            </van-grid>
        </main>
        <footer class="footer">

        </footer>
    </div>
</template>
<script setup>
import { Icon } from 'vant';
import {index_infos } from "@/api/index.js"
import {ref,reactive} from "vue"
import {onMounted} from "vue"
let carousels=reactive([])
let hotGoodses=reactive([])
let newGoodses=reactive([])
let recommendGoodses=reactive([])

onMounted(()=>{
    index_infos().then((res)=>{
        // 轮播图数据
        carousels.length=0
        res.data.carousels.forEach(element => {
            // console.log(element);
            carousels.push(element.carouselUrl)
        });
        // carousels=res.data.carousels
        // console.log(carousels);
        // 热门商品
        hotGoodses.length=0
        res.data.hotGoodses.forEach(item=>{
            hotGoodses.push(item)
        })
        //新品上线
        res.data.newGoodses.forEach(item=>{
            newGoodses.push(item)
        })
        // 最新推荐
        res.data.recommendGoodses.forEach(item=>{
            recommendGoodses.push(item)
        })
        console.log(recommendGoodses);
        // console.log(carousels.values);
    })
})

window.onscroll=function(){
    let toScroll = document.documentElement.scrollTop //滚动的距离,距离顶部的距离
    let bignav = document.getElementsByClassName('topNav')//获取到导航栏
    let bignavLeft = document.getElementsByClassName('left')//获取到导航栏左侧
    let bignavRight = document.getElementsByClassName('right')//获取到导航栏右侧
    if(toScroll<=100){

    }else{
        bignav[0].style.backgroundColor='#1BAEAE'
        bignavLeft[0].style.color='white'
        bignavRight[0].style.color='white'
    }
}


    

</script>
<style  scoped lang="less">
header{
    position: fixed;
    left:0;
    top: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 50px;
    line-height: 50px;
    z-index: 10;
    .left{
        color: #1BAEAE;
    }
    .middle{
        background: rgba(255,255,255,0.5);
        border-radius:25px;
        height: 30px;
        width: 260px;
        margin-top: 10px;
        line-height: 30px;
        text-align: center;
        .one{
            font-size: 24px;
            color: #1BAEAE;
            font-weight: bolder;
        }
        .two{

        }
        .three{
            margin-left: 10px;
            font-size: 12px;
            vertical-align: middle;
        }
    }
    .right{
        color: #1BAEAE;
    }
    
}
main{
    background-color: #F9F9F9;
    .van-grid-item{
        .van-icon{
            font-size: 40px;
            color: #1BAEAE;
        }
        .iconfont{
            font-size: 40px;
            color: #1BAEAE;
        }
        span{
            font-size: 12px;
            margin-top: 5px;
        }
    }
    .newgood{
        text-align: center;
        color: #1BAEAE;
        margin: 16px;
        font-size: 20px;
    }
    .newGoods{
        border-right: 0.5px solid #ccc;
        border-bottom: 0.5px solid #ccc;
        img{
            width: 100px;
        }
        p{
            font-size: 16px;
            text-align: center;
        }
        span{
            color: #1BAEAE;
            font-size: 16px;
        }
    }
    
}
.footer{
height: 20px;
}
</style>